Typescript: Keyof, TypeOf, Indexed

@Troy · November 16, 2023 · 2 min read

Keyof

KeyOf는 객체 타입의 키값, 속성에 대한 타입으로 string 또는 numeric literal의 union으로 나타내진다.

type Point = { x: number; y: number }
type P = keyof Point // "x"|'y'

이때 string또는 number 인덱스 signature를 가지고 있다면 keyof는 해당 타입을 반환한다.

type Arrayish = { [n: number]: unknown }
type A = keyof Arrayish // number

type Mapish = { [k: string]: boolean }
type M = keyof Mapish // string

TypeOf

typeof 연산자는 자바스크립트 자체가 이미 가지고 있다. 표현식에서 사용가능하고 변수의 타입을 추론할 때 쓰일 수 있다.

console.log(typeof "Hello world") // string
let s = "hello"
let n: typeof s // string

typeof는 보다 복잡한 상황에서 자주사용되는데 값으로 사용되는지, 타입으로 사용되는지를 타입스크립트가 이해할 수 있게 전달해줄 때 사용된다.

type Predicate = (x: unknown) => boolean
type K = ReturnType<Predicate> // boolean

function f() {
  return { x: 10, y: 3 }
}
type P = ReturnType<typeof f>

그렇다고 항상 사용할 수 있는 것은 아니라 값으로 사용되는 변수나 속성에서만 쓰일 수 있어.

typeof
typeof

Indexed Access Type

객체의 key값에 접근하듯이 type 또한 key 명을 이용해 타입을 추론할 수 있다.

type Person = { age: number; name: string; alive: boolean }
type Age = Person["age"]

type I1 = Person["age" | "name"] // type I1 = string | number

type I2 = Person[keyof Person] // type I2 = string | number | boolean

type AliveOrName = "alive" | "name"
type I3 = Person[AliveOrName] // type I3 = string | boolean

배열은 특별하게 number를 전달하게 되면 아이템이 어떤 타입을 가지는 지 타입을 추론할 수 있다.

const MyArray = [
  { name: "Alice", age: 15 },
  { name: "Bob", age: 23 },
  { name: "Eve", age: 38 },
]

type Person = (typeof MyArray)[number]

type Person = {
  name: string
  age: number
}
type Age = (typeof MyArray)[number]["age"]

// Or
type Age2 = Person["age"]
@Troy
매일의 시행착오를 기록하는 개발일지입니다.